<template>
    <div class="content">
      <div class="cotainer">
        <el-form label-position="right" label-width="80px" :model="formData">
          <el-form-item label="套餐名称">
            <el-input v-model="formData.name" placeholder="请输入套餐名称"></el-input>
          </el-form-item>
          <el-form-item label="选择产品" v-for="(item,index) in formData.products" :key="index">
            <div class="fx-row fx-row-center">
              <el-select v-model="formData.products[index].name" placeholder="请选择产品">
                <el-option label="产品一" value="shanghai"></el-option>
                <el-option label="产品二" value="beijing"></el-option>
              </el-select>
              <label style="width: 60px;" class="el-form-item__label">数量</label>
              <el-input v-model="formData.products[index].count" class="coutInpt" placeholder="请输入数量"></el-input>

              <div class="addicon fx-1" v-if="index==formData.products.length-1" @click="addproduct"> <span style="color: red;margin-right: 5px"><i class="el-icon-circle-plus"></i></span>添加产品</div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即添加</el-button>

          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>

    export default {
        name: 'add',
        components: {},
        data() {
            return {
              formData: {
                name: '',
                products:[
                  {name:"shanghai",count:1},
//                  {name:"beijing",count:1}
                ],
                type: ''
              }
            }
        },
        methods: {
          addproduct(){
              this.formData.products.push( {name:"shanghai",count:1})
          },
          onSubmit(){

          }

        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '~@/styles/chow.scss' ;//引入公共css类
  .el-select,.el-input{
    width: 300px;
  }

   /deep/ .coutInpt{
    width: 120px;
     margin-left: 0px;
     .el-input__inner{
       text-align: center;
     }
  }
  .addicon{
    width: 100px;
    text-align: center;
    cursor: pointer;
  }
  .cotainer{
    width: 700px;
  }
</style>
